<template>
    <div>
        <div class="header-content">
            <div>
                <div class="loginCenter">
                    <div>
                        <span class="login-logo"><cite>佳颖业务管理平台</cite></span>
                    </div>
                    <div>
                        <span class="login-times">
                          <i class="dataico"></i>
                          <cite id="year" class="year">{{ year }}</cite>
                          <cite id="day" class="day">{{ month }}-{{ day }}&nbsp;星期{{ week }}</cite>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <el-form ref="account" :model="account" :rules="rules" class="demo-ruleForm login-container"
                 label-position="left"
                 label-width="0px">
            <h3 class="title">欢迎登录</h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="account.username" placeholder="账号" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="account.password" type="password" placeholder="请输入登录密码"
                          auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item style="width:100%;margin-top: 40px">
                <el-button class="aw"
                           style="width:100%;"
                           type="primary"
                           @click="submit('account')"
                           :disabled="allowLogin"
                           :loading="loading">登录
                </el-button>
            </el-form-item>
        </el-form>
        <div class="footer">
            <footer-copyright></footer-copyright>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            let date = new Date();
            let validateAccount = (rules, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入账号'));
                } else {
                    this.validateCorrect();
                    callback();
                }
            };
            let validatePwd = (rules, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    this.validateCorrect();
                    callback();
                }
            };
            return {
                loading: false,
                allowLogin: true,
                account: {
                    username: '',
                    password: ''
                },
                rules: {
                    username: [{required: true, validator: validateAccount, trigger: 'change'}],
                    password: [{required: true, validator: validatePwd, trigger: 'change'}]
                },
                fullscreenLoading: false,
                year: date.getFullYear(),
                month: (date.getMonth() + 1).toString().length === 1 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1,
                day: date.getDate().toString().length === 1 ? ("0" + date.getDate()) : date.getDate(),
                week: date.getDay() == 1 ? "一" : (date.getDay() == 2 ? "二" : (date.getDay() == 3 ? "三" : (date.getDay() == 4 ? "四" : (date.getDay() == 5 ? "五" : (date.getDay() == 6 ? "六" : "日")))))
            };
        },
        create() {
            let reg_user = sessionStorage.getItem('username');
            if (reg_user) {
                this.account.username = reg_user.username;
            }
        },
        methods: {
            submit(formName) {
                let _this = this;

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.$http({
                            url: '/api/authentication/form',
                            method: 'post',
                            headers: {'X-Requested-With': 'XMLHttpRequest'},
                            params: this.account
                        }).then(function (res) {
                            if (res.data.statusCode == 200) {
                                sessionStorage.setItem('userId', res.data.content.user.id );
                                sessionStorage.setItem('tokenId', res.data.content.tokenId);
                                sessionStorage.setItem('username', _this.account.username);
                                localStorage.setItem('ms_username', _this.account.username);
                                localStorage.setItem('roles', JSON.stringify(res.data.content.user.roles));
                                _this.$router.push({path: '/dashboard'});

                            } else {
                                _this.loading = false;
                                _this.$message.error(res.data.desc);
                            }
                        }).catch(function (catchres) {
                            _this.loading = false;
                            _this.$message.error("登录失败，账号或密码错误");
                        })
                    }
                });
            },
            validateCorrect() {
                if (this.account.password.trim().length > 0 && this.account.username.trim().length > 0) {
                    this.allowLogin = false;
                } else {
                    this.allowLogin = true;
                }
            }
        }
    }

</script>

<style scoped>
    body {
        background: #DFE9FB;
    }

    .header-content {
        position: fixed;
        top: 0;
        width: 100%;
        height: 87px;
        padding: 6px 0;
        border-bottom: 1px solid #ddd;
        box-shadow: 0 0 2px #ddd;
        background: #1898c5;
    }

    .header-content div {
        height: 100%;
    }

    .loginCenter {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

    .loginCenter > div {
        width: 44%;
        margin: 0 3%;
        float: left;
        line-height: 80px;
    }

    .login-logo {
        font-size: 30px;
        color: #FFF;
        vertical-align: middle;
    }

    .login-logo cite {
        font-size: 30px;
        margin-left: 30%;
    }

    .login-times {
        position: relative;
        color: #FFF;
        display: inline-block;
        vertical-align: middle;
        font-weight: normal;
    }

    .dataico {
        /*background: url(../images/dateico.png) no-repeat;*/
        width: 36px;
        height: 39px;
        display: inline-block;
        vertical-align: middle;
    }

    .login-times .year {
        font-size: 48px;
        position: relative;
        display: inline-block;
        margin-left: 30px;
        vertical-align: middle;
    }

    .login-times .day {
        font-size: 30px;
        position: relative;
        width: 200px;
        margin-left: 20px;
        display: inline-block;
        vertical-align: bottom;
    }

    .login-container {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 160px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .login-container .title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }

    .login-container .remember {
        margin: 0px 0px 35px 0px;
    }

    .login-container .el-select {
        width: 100%;
    }

    .extra-text {
        position: relative;
        margin-bottom: 0;
        padding-left: 2px;
    }

    .extra-text a {
        font-size: 12px;
        color: #aaa;
    }

    .extra-text a:hover {
        color: #29e;
    }
    .extra-text .reg-text {
        position: absolute;
        top: 4px;
        right: 2px;
    }
</style>

